<template>
  <div class="header">
    <div class="header-left">
      <div class="header-left-title">叩丁狼电商运营平台</div>
      <div class="header-left-icon" @click="isCollapse = !isCollapse">
        <el-icon color="white" size="20px"><Grid /></el-icon>
      </div>
    </div>
    <!-- <div class="header-right">
      <div>admin</div>
      <div class="header-right-icon">
        <el-icon><ArrowDown /></el-icon>
      </div>
    </div> -->
    <div class="right">
      <div class="select">
        <el-dropdown @command="commandHandle">
          <span class="el-dropdown-link">
            {{ store.username }}
        
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="index">首页</el-dropdown-item>
              <el-dropdown-item command="logout">退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { inject } from "vue";
import { useStore } from "../../../store/login";
import { logout } from "../../../common/index";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
const store = useStore();
const isCollapse = inject("isCollapse");
const router = useRouter();
console.log(store.rotes);

const commandHandle = (command: string) => {
  if (command === "index") {
    // 跳转到首页
    router.push("/index");
  } else if (command === "logout") {
    // 退出登录
    logout(
      () => {
        // 自己把登出的请求实现
      },
      () => {
        // 提示
        ElMessage.success("退出成功");
      }
    );
  }
};
</script>

<style scoped lang="less">
.header {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .header-left {
    display: flex;
    .header-left-title {
      font-size: 27px;
      color: white;
    }
    .header-left-icon {
      width: 20px;
      height: 20px;
      margin: 10px;
    }
  }
  .header-right {
    display: flex;
    color: white;
    .header-right-icon {
      margin: 3px;
    }
  }
}
</style>
